<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS 变量</title>

		<style type="text/css">
			:root {
				--base: #ffc600;
				--spacing: 10px;
				--blur: 10px;
			}

			img {
				width: 600px;
				height: 400px;
				padding: var(--spacing);
				background: var(--base);
				filter: blur(var(--blur));
			}

			.hl {
				color: var(--base);
			}

			body {
				text-align: center;
				background: #193549;
				color: white;
				font-family: 'helvetica neue', sans-serif;
				font-weight: 100;
				font-size: 30px;
			}

			.controls {
				margin-bottom: 50px;
			}

			input {
				width: 100px;
			}

			.result {
				display: flex;
				flex-direction: row;
				justify-content: center;
				color: var(--base);
			}

			.showText {
				margin: 0px 25px 50px 25px;
			}
		</style>
	</head>

	<body>
		<h2>Update CSS Variables with <span class="hl">JS</span></h2>

		<div class="controls">
			<label for="spacing">Spacing:</label>
			<input type="range" id="spacing" name="spacing" min="10" max="200" value="10" data-sizing="px" />

			<label for="blur">Blur:</label>
			<input type="range" id="blur" name="blur" min="0" max="25" value="10" data-sizing="px" />
			<label for="base">Base Color</label>
			<input type="color" id="base" name="base" value="#ffc600" />
		</div>

		<div class="result">
			<div class="showText">{spacing:<label id="label_spacing">#ffc600</label>}</div>
			<div class="showText">{blur:<label id="label_blur">10px</label>}</div>
			<div class="showText">{base:<label id="label_base">10px</label>}</div>
		</div>

		<img src="https://unsplash.it/600/400">
	</body>

	<script type="text/javascript">
		var inputs = document.querySelectorAll('.controls input');

		function handleUpdate () {
			var suffix = this.dataset.sizing || '';
			document.documentElement.style.setProperty('--'+this.name, this.value+suffix);
			document.getElementById('label_'+this.name).innerText = this.value + suffix;
		}

		inputs.forEach(function (input, index, arr) {
			input.addEventListener('change', handleUpdate);
			input.addEventListener('mousemove', handleUpdate);
		})
	</script>
</html>
